<template>
  <div class="detailController">
    <el-tooltip
      effect="dark"
      content="播放"
      placement="bottom"
      :visible-arrow="false"
      :open-delay="500"
      :offset="100"
    >
      <div class="player">
        <span>播放</span>
      </div>
    </el-tooltip>
    <el-tooltip
      effect="dark"
      content="添加到播放列表"
      placement="bottom"
      :visible-arrow="false"
      :open-delay="500"
      :offset="100"
    >
      <div class="plus" />
    </el-tooltip>
    <el-tooltip
      effect="dark"
      content="添加到收藏夹"
      placement="bottom"
      :visible-arrow="false"
      :open-delay="500"
      :offset="100"
    >
      <div class="collect">
        <span>({{ detail.subscribedCount }})</span>
      </div>
    </el-tooltip>
    <el-tooltip
      effect="dark"
      content="分享"
      placement="bottom"
      :visible-arrow="false"
      :open-delay="500"
      :offset="100"
    >
      <div class="share">
        <span>({{ detail.shareCount }})</span>
      </div>
    </el-tooltip>
    <el-tooltip
      effect="dark"
      content="下载"
      placement="bottom"
      :visible-arrow="false"
      :open-delay="500"
      :offset="100"
    >
      <div class="download">
        <span>下载</span>
      </div>
    </el-tooltip>
    <el-tooltip
      effect="dark"
      content="评论"
      placement="bottom"
      :visible-arrow="false"
      :open-delay="500"
      :offset="100"
    >
      <div class="comment">
        <span>({{ detail.commentCount }})</span>
      </div>
    </el-tooltip>
  </div>
</template>

<script>
export default {
  name: 'Controller',
  props: {
    /**
     * 接收一个对象，包含
     * {
     *  当前榜单或歌曲或mv的id，
     *  收藏数subscribedCount，
     *  转发数shareCount，
     *  评论数commentCount
     * }
     */
    detail: {
      type: Object,
      default: () => ({})
    }
  }
}
</script>

<style lang="less" scoped>
.detailController {
  display: flex;
  margin-top: 20px;
  height: 40px;
  font-family: simsun, \5b8b\4f53;
  // 播放按钮
  .player {
    height: 30px;
    background: url('../assets/images/button2.png') -5px -633px no-repeat;
    line-height: 30px;
    color: white;
    border-radius: 3px 0 0 3px;
    cursor: pointer;
    flex-shrink: 0;
    // border-right: #1c5186;
    span {
      margin: 0 10px 0 30px;
    }
    &:hover {
      background: url('../assets/images/button2.png') -5px -719px no-repeat;
    }
  }
  // 添加到播放列表
  .plus {
    height: 30px;
    width: 31px;
    background: url('../assets/images/button2.png') left -1588px no-repeat;
    cursor: pointer;
    &:hover {
      background: url('../assets/images/button2.png') -40px -1588px no-repeat;
    }
  }
  // 添加到收藏夹
  .collect {
    margin: 0 5px;
    height: 30px;
    background: url('../assets/images/button2.png') left -977px no-repeat;
    line-height: 30px;
    border-right: 1px solid #c4c4c4;
    border-radius: 3px;
    cursor: pointer;
    span {
      margin: 0 5px 0 28px;
    }
    &:hover {
      background: url('../assets/images/button2.png') left -1063px no-repeat;
    }
  }
  // 分享
  .share {
    height: 30px;
    background: url('../assets/images/button2.png') left -1225px no-repeat;
    line-height: 30px;
    border-right: 1px solid #c4c4c4;
    border-radius: 3px;
    cursor: pointer;
    span {
      margin: 0 5px 0 28px;
    }
    &:hover {
      background: url('../assets/images/button2.png') left -1268px no-repeat;
    }
  }
  // 下载
  .download {
    margin: 0 5px;
    height: 30px;
    background: url('../assets/images/button2.png') left -2761px no-repeat;
    line-height: 30px;
    border-right: 1px solid #c4c4c4;
    border-radius: 3px;
    cursor: pointer;
    flex-shrink: 0;
    span {
      margin: 0 8px 0 28px;
    }
    &:hover {
      background: url('../assets/images/button2.png') left -2805px no-repeat;
    }
  }
  // 评论
  .comment {
    height: 30px;
    background: url('../assets/images/button2.png') left -1465px no-repeat;
    line-height: 30px;
    border-right: 1px solid #c4c4c4;
    border-radius: 3px;
    cursor: pointer;
    span {
      margin: 0 5px 0 28px;
    }
    &:hover {
      background: url('../assets/images/button2.png') left -1508px no-repeat;
    }
  }
}
</style>
